<style>
#text span {
    color: #0a0;
}
</style>

<dom-module id="simple-hierarchy">
    <link rel="import" type="css" href="simple-view.css">
    <template>
        <div id="text"></div>
    </template>
</dom-module>

<dom-module id="simple-assets">
    <link rel="import" type="css" href="simple-view.css">
    <template>
        <div id="text"></div>
    </template>
</dom-module>

<dom-module id="simple-inspector">
    <link rel="import" type="css" href="simple-view.css">
    <template>
        <div id="text"></div>
    </template>
</dom-module>

<dom-module id="simple-game">
    <link rel="import" type="css" href="simple-view.css">
    <template>
        <div id="text"></div>
    </template>
</dom-module>

<dom-module id="simple-scene">
    <link rel="import" type="css" href="simple-view.css">
    <template>
        <div id="text"></div>
    </template>
</dom-module>

<dom-module id="simple-console">
    <link rel="import" type="css" href="simple-view.css">
    <template>
        <div id="text"></div>
    </template>
</dom-module>

<script>
Editor.easyRegister = function ( panelID, elementID ) {
    Editor.polymerPanel( panelID, {
        is: elementID,

        listeners: {
            'resize': '_onResize'
        },

        _onResize: function () {
            var thisDOM = Polymer.dom(this);
            var panel = thisDOM.parentNode;
            var rect = panel.getBoundingClientRect();

            var html = "";
            html = 'size: <span>' + rect.width.toFixed(2) + '</span>';
            html += ', <span>' + rect.height.toFixed(2) + '</span>\n';
            html += '\npanel: \n';
            html += '  cur:  <span>' + panel.curWidth + '</span>';
            html += ', <span>' + panel.curHeight + '</span>\n';
            html += '  comp:  <span>' + panel.computedWidth + '</span>';
            html += ', <span>' + panel.computedHeight + '</span>\n';
            html += '  min:  <span>' + panel.computedMinWidth + '</span>';
            html += ', <span>' + panel.computedMinHeight + '</span>\n';
            html += '  max:  <span>' + panel.computedMaxWidth + '</span>';
            html += ', <span>' + panel.computedMaxHeight + '</span>\n';
            html += '\nview: \n';
            html += '  size:  <span>' + this.getAttribute('width') + '</span>';
            html += ', <span>' + this.getAttribute('height') + '</span>\n';
            html += '  min:  <span>' + this.getAttribute('min-width') + '</span>';
            html += ', <span>' + this.getAttribute('min-height') + '</span>\n';
            html += '  max:  <span>' + this.getAttribute('max-width') + '</span>';
            html += ', <span>' + this.getAttribute('max-height') + '</span>\n';

            this.$.text.innerHTML = html;
        },
    });
};

Editor.easyRegister( 'demo-layout.hierarchy', 'simple-hierarchy' );
Editor.easyRegister( 'demo-layout.assets', 'simple-assets' );
Editor.easyRegister( 'demo-layout.inspector', 'simple-inspector' );
Editor.easyRegister( 'demo-layout.game', 'simple-game' );
Editor.easyRegister( 'demo-layout.scene', 'simple-scene' );
Editor.easyRegister( 'demo-layout.console', 'simple-console' );
</script>
